@import url('https://fonts.googleapis.com/css?family=Syncopate|Unica+One');
@import url(http://fonts.googleapis.com/css?family=Roboto:400,400italic,500,500italic,700,700italic,900,900italic,300italic,300,100italic,100);
@import url('https://fonts.googleapis.com/css?family=Roboto&display=swap');

body, html {
	overflow-y: hidden;
}
/* main.css */

button{ 
    color: white;
    font-family: 'Roboto', sans-serif;
	font-size: 15px;
	cursor: pointer;
    width: 10%;
    height: 5%;
    display: inline-block;
    position: relative;
    left: 10%;
	bottom: -100px;
	background-color: Transparent;
    background-repeat:no-repeat;
    border: none;
    overflow: hidden;
    outline:none;

}

#exitbank {
	position: absolute;
	top: 14px;
	left: 540px;
	width: 12%;
}

#deposit {
	position: absolute;
	top: 14px;
	left: 475px;
	width: 9%;
}

#withdraw {
	position: absolute;
	top: 14px;
	left: 415px;
	width: 8%;
}

#transfer {
	position: absolute;
	top: 14px;
	left: 343px;
}

#deposit2 {
	font-family: 'Roboto', sans-serif;
	color: rgb(255, 255, 255);
	background-color: rgb(0, 0, 158);
	width: 210px;
	height: 40px;
	font-size: 17px;
	background-repeat:no-repeat;
	left: 33.5%;
}

#deposit2:hover {
	transition: 300ms;
	background-color: rgb(0, 0, 134);
	letter-spacing: 3px;
	text-decoration:none;
}

#withdraw2 {
	font-family: 'Roboto', sans-serif;
	color: rgb(255, 255, 255);
	background-color: #00009f;
	width: 210px;
	height: 40px;
	font-size: 17px;
	background-repeat:no-repeat;
	left: 33.5%;
}

#withdraw2:hover {
	transition: 300ms;
	background-color: rgb(0, 0, 134);
	letter-spacing: 3px;
	text-decoration:none;
}

#transfer2 {
	font-family: 'Roboto', sans-serif;
	color: rgb(255, 255, 255);
	background-color: rgb(117, 117, 117);
	width: 210px;
	height: 70px;
	font-size: 17px;
	background-repeat:no-repeat;
	left: 33.5%;
}

#transfer2:hover {
	transition: 300ms;
	background-color: rgb(109, 109, 109);
	-webkit-box-shadow: 0px 6px 0px 0px #4B4B4B; 
	box-shadow: 0px 6px 0px 0px #4B4B4B;
	letter-spacing: 3px;
	text-decoration:none;
}

h3{
	position: absolute;
	left: 10%;
	bottom: 80%;
}

.mainpeng {
	position: absolute;
	top: 5.3px;
	left: 240px;
	color: white;
	font-weight: normal;
	font-size: 10px;
}

.sans {
	position: absolute;
	top: 5.3px;
	left: 450px;
	color: white;
	font-weight: normal;
	font-size: 10px;
}

.logo {
	position: absolute;
	top: -14px;
	width: 133px;
	height: 75px;
	z-index: 9999;
}
.back {
	top: 50px;
	left: 0px;
	position: absolute;
	width: 620px;
	height: 306px;
}

.top {
	background-color: #00009f;
	width: 100%;
	height: 50px;
	position: absolute;
	left: 0px;
	top: 0px;
}

#balanceX{
	position: absolute;
	margin: 10px auto;
	left: 44%;
	top: 40%;
	
	font-size:30px;
}


#canceldeposit, #cancelwithdraw, #canceltransfer {
	position: absolute;
	top: 14px;
	left: 540px;
	width: 12%;
}

.general{
    background-color: white;
	background-repeat: no-repeat;
	font-family: 'Roboto', sans-serif;
	background-size: 620px 430px;
	width: 600px;
	height: 326px;
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
    padding: 10px;
	position: absolute;
	top: 50%;
	left: 70%;
	margin-top: -250px;
	margin-left: -400px;
	padding-bottom: 20px;
}

.depositUI{
    background-color: white;
	background-repeat: no-repeat;
	font-family: 'Roboto', sans-serif;
	background-size: 620px 430px;
	width: 600px;
	height: 326px;
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
    padding: 10px;
	position: absolute;
	top: 50%;
	left: 70%;
	margin-top: -250px;
	margin-left: -400px;
	padding-bottom: 20px;
}
.withdrawUI{
    background-color: white;
	background-repeat: no-repeat;
	font-family: 'Roboto', sans-serif;
	background-size: 620px 430px;
	width: 600px;
	height: 326px;
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
    padding: 10px;
	position: absolute;
	top: 50%;
	left: 70%;
	margin-top: -250px;
	margin-left: -400px;
	padding-bottom: 20px;
}

.balanceUI{
    background-color: white;
	background-repeat: no-repeat;
	font-family: 'Roboto', sans-serif;
	background-size: 620px 430px;
	width: 600px;
	height: 400px;
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
    padding: 10px;
	position: absolute;
	top: 50%;
	left: 70%;
	margin-top: -250px;
	margin-left: -400px;
	padding-bottom: 20px;
}

.transferUI{
    background-color: white;
	background-repeat: no-repeat;
	font-family: 'Roboto', sans-serif;
	background-size: 620px 430px;
	width: 600px;
	height: 400px;
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
    padding: 10px;
	position: absolute;
	top: 50%;
	left: 70%;
	margin-top: -250px;
	margin-left: -400px;
	padding-bottom: 20px;
}

#amount, #amountw, #amountt, #to {
	font-family: 'Roboto', sans-serif;
	font-size: 17px;
	outline: none;
}

#from, #to, #amountt {
	position: relative;
    top: 100px;
    left: 62px;
    
	font-family: 'Roboto', sans-serif;
    width: 40%;
    height: 8%;
    padding: 5px 5px;
    margin: 15px 0;
    box-sizing: border-box;
 
}


h1{
	font-family: 'Roboto', sans-serif;
	color: black;
	position: relative;
	left: 48%;
	top: 39%;
}
.b{
	
	font-family: 'Roboto', sans-serif;
	color: black;
	position: relative;
	left: 30%;
	top: 30%;
}



#backbalnace {
	position:relative;
	top: 60%;
	left: 30%;
}




input[type=text] {
	position: relative;
    top: 100px;
    left: 62px;
    
	font-family: 'Unica One';
    width: 80%;
    height: 15%;
    padding: 5px 5px;
    margin: 40px 0;
    box-sizing: border-box;
 
	
}


button:hover{
	color: #cfcfcf;
    text-decoration:underline;
}


h5 {
	color: black;
	position: absolute;
	font-size: 25px;
	left: 38.7%;
	top: 30px;
}